<template>
  <div class="row mt-3">
    <div class="col-md-12 col-lg-12">
      <div class="card">
        <div class="card-body">
          <img class="mx-auto d-block" src="../../src/assets/icon.jpg" alt="">
          <form @submit.prevent="onSubmit">
            <div class="from-group">
              <label for="email"> 邮箱</label>
                <input
                  type="email"
                  class="form-control"
                  v-model="email"
                >
            </div>
            <div class="form-group">
              <label for="password"> 密码</label>
              <input
                type="password"
                class="form-control"
                v-model="password"
              >
            </div>
            <div class="form-group">
              <label for="confirm-password"> 确认密码</label>
              <input
                type="password"
                class="form-control"
                v-model="confirmPassword"
              >
            </div>
            <button type="submit" class="btn btn-block btn-success">注册</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Register.vue",
      data(){
          return{
            email:'',
            password:'',
            confirmPassword:''
          }
      },
      methods:{
        onSubmit(){
          if(this.password===this.confirmPassword){
            const formData ={
              email:this.email,
              password:this.password,
              confirmPassword:this.confirmPassword
            }
            axios.post('/users.json',formData)
              .then( res => this.$router.push({name:'loginLink'}))
          }else {
            alert('两次密码不一致')
          }
        }
      }
    }
</script>

<style scoped>

</style>
